<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" href="css/core.css"/>
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>
	<body>
		<header class="header">
				<div class="top" id="top">
					<div class="content">		
						<div class="left">
							<div class="all-menu">
								<a href="#"></a>
								<div class="sub-menu">
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Not Found</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Search Results</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Skills</a></li>
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											
										</ul>
									</div>
								</div>
							</div>
							<div class="logo">
								<a href="#">
									<span class="icon"></span>
									<span class="globals"></span>
								</a>
							</div>
						</div>
						<div class="nav">
							<ul>
								<li><a href="index.html" >Home</a></li>
								<li class="pages">
									<a href="pages.html">Pages</a>
									<ul class="sub-nav">
										<li><a href="about-us.html">About Us</a></li>
										<li><a href="vancancies-details.html">Vacancies Details</a></li>
										<li><a href="blog-details.html">Blog Details</a></li>
									</ul>
								</li>
								<li  class="pages">
									<a href="portfolio.html">Portfolio</a>
									<ul class="sub-nav">
										<li><a href="masonry-four.html">Masonry Four</a></li>
										<li><a href="masonry-three.html">Masonry Three</a></li>
										<li><a href="grid_three.html">Grid Three</a></li>
										<li><a href="grid-masonry-three.html">Grid Masonry Three</a></li>
										<li><a href="landscape.html"  class="current">Landscape</a></li>
										<li><a href="gallery.html">Gallery</a></li>
									</ul>
								</li>
								<li><a href="vacancies.html">Vacancies</a>
								</li>
								<li><a href="blog.html">Blog</a></li>
								<li><a href="cantact.html">Contacts</a></li>
							</ul>
						</div>
						<div class="right">
							<span></span>
							<ul class="sub-nav">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Vacancies</a></li>
								<li><a href="#">FAQ</a></li>
								<li><a href="#">Pricing Table</a></li>
								<li><a href="#">Our Team</a></li>	
							</ul>
						</div>
					</div>
					
				</div>
		<!-------移动端导航------->
				<div class="menu-list" id="menu-list">
					<div class="item">
						<ul class="item-menu">
							<li class="home" id="home"></li>
							<li class="more"></li>
							<li class="logo"></li>
						</ul>
						<ul id="sub-menu">
							<li><a href="index.html">Home</a></li>
							<li><a href="pages.html">pages</a></li>
							<li><a href="portfolio.html">Portfolio</a></li>
							<li><a href="vacancies.html">Vacancies</a></li>	
							<li><a href="blog.html">Blog</a></li>
							<li><a href="cantact.html">Contacts</a></li>
						</ul>
					</div>
				</div>
				
				<div class="bottom" id="bottom">
					<div class="inner">
						<div class="left">
							<a href="#">Home</a>
							<span>/</span>
							<a href="#">pages</a>
							<span>/</span>
							<a href="#" class="current">Dropdown Menu Style</a>
						</div>
						<div class="right">
							<div class="message">
								<a href="#">+</a>
								<div class="send">
									<span><i></i>Send a Message</span>
								</div>
							</div>
						</div>
					</div>
				</div>
		</header>
		<div class="landscape-container">
			<section class="banner">
				<div class="slider" id="slider">
					<div><img  src="img/landscape05.jpg"/></div>
					<div style="display: none;"><img  src="img/landscape01.jpg"/></div>
					<div style="display: none;"><img  src="img/landscape03.jpeg"/></div>
					<div style="display: none;"><img  src="img/landscape02 (1).jpg"/></div>
					<div style="display: none;"><img  src="img/landscape04.jpg"/></div>
					<div style="display: none;"><img  src="img/landscape06.jpg"/></div>
				</div>
				<a href="javascript:;" id="pre"></a>
				<a href="javascript:;" id="next"></a>
				<div class="num">
					<ul>
						<li class="on" id="on"></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</section>
			<section class="artical">
				<div class="centent">
					<div class="download">
						<h2></h2>
					</div>
					<div class="details">
						
					</div>
				</div>
			</section>
			<section class="list clearfix">
				<div class="article">
					<h3>Claritas etiam processus dynamicus</h3>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Eodem modo typi, qui nunc nobis videntur parum.
						</br>
						</br>
						Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
					</p>
					<div class="button">
						<span class="butt1">Send Resume</span>
						<span class="butt2">Contact Us</span>
					</div>
				</div>
				<div class="aside">
					<h3>Details</h3>
					<ul>
						<li>
							<i class="date"></i><span>Date:</span><a href="#"> 07 May, 2015</a>
						</li>
						<li>
							<i class="category"></i><span>Category:</span><a href="#"> Illustration</a>
						</li>
						<li>
							<i class="client"></i><span>Client:</span><a href="#"> Company Inc.</a>
						</li>
						<li>
							<i class="views"></i><span>Views:</span><a href="#"> 2635</a>
						</li>
						<li>
							<i class="likes"></i><span>Likes:</span><a href="#"> 89</a>
						</li>
					</ul>
				</div>
			</section>
			<section class="related">
				<div class="listing warpper">
					<div class="inners">
						<h1>Related Listing</h1>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam. </p>
					</div>
					
				</div>
			</section>
			<section class="focus clearfix">
				<div class="box">
					<img src="img/landscape_1.jpg" />
					<div class="on"></div>
					<h3 class="thum">QARO - WordPress Theme</h3>
					<div class="name">Processus dynamicus, qui sequitur mutationem consuetudium. </div>
					<div class="bottom">
						<p class="chose">Portfolio   /   Website   /   PSD Templates</p>
						<button></button>
					</div>
				</div>
				<div class="box">
					<img src="img/landscape_2.jpg" />
					<div class="on"></div>
					<h3 class="thum">Plant with Lightbulb</h3>
					<div class="name">Processus dynamicus, qui sequitur mutationem consuetudium. </div>
					<div class="bottom">
						<p class="chose">Portfolio   /   Website   /   PSD Templates</p>
						<button></button>
					</div>
				</div>
				<div class="box">
					<img src="img/landscape_3.jpg" />
					<div class="on"></div>
					<h3 class="thum">Farm Animals Icons Set</h3>
					<div class="name">Processus dynamicus, qui sequitur mutationem consuetudium. </div>
					<div class="bottom">
						<p class="chose">Portfolio   /   Website   /   PSD Templates</p>
						<button></button>
					</div>
				</div>
				<div class="box">
					<img src="img/landscape_4.jpg" />
					<div class="on"></div>
					<h3 class="thum">Globals Catalog UI Kit</h3>
					<div class="name">Processus dynamicus, qui sequitur mutationem consuetudium.</div>
					<div class="bottom">
						<p class="chose">Portfolio   /   Website   /   PSD Templates</p>
						<button></button>
					</div>
				</div>
			</section>
			<div class="back">
				<div class="poto">
					<a href="portfolio.html" class="button">
						<span class="icon"></span>
						<span>Back to Portfolio</span>
					</a>
				</div>
			</div>
		</div>
		
		<footer class="common-footer-wrapper">
			<div class="common-footer">
				<div class="common-footer-center">
					<div class="center-text">
						<span>Follow Us in Social Networks</span>
						<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
					</div>
					
					<ul class="center-menu">
						<li><img src="img/footer1.png"/></li>
						<li><img src="img/footer9.png"/></li>
						<li><img src="img/footer5.png"/></li>
						<li><img src="img/footer2.png"/></li>
						<li><img src="img/footer8.png"/></li>
						<li><img src="img/footer4.png"/></li>
						<li><img src="img/footer3.png"/></li>
						<li><img src="img/footer6.png"/></li>
					</ul>
				</div>
			</div>
			
			<div class="common-footer-bg">
				<div class="bg-text">
					<div class="text-left">
						<span>Twitter Widget</span>
						<div class="left-inner-top">
							<img src="img/footer7.png"/>
							<div class="inner-top-write">
								Mirum est <a href="">@global</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>6 MINUTES AGO</p>
							</div>
						</div>
						
						<div class="left-inner-bottom">
							<img src="img/footer7.png"/>
							<div class="inner-bottom-write">
								<a href="">@themefire</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>18 JUN 2015</p>
							</div>
						</div>
					</div>
					
					<div class="text-center">
						<span>Dribble Widget</span><br /><br />
						<div class="center-span">claritas est ynew trdhnm euy yebviumgd tyreuin oiywdw gyns ghbnh wikjsdhd</div>
						<ul class="center-img-item">
							<li><img src="img/footer11.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer13.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer12.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer15.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer14.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer16.jpg" width="139px" height="100px"/></li>
						</ul>
					</div>
					
					<div class="text-right">
						<span>Email Newsletters</span><br /><br />
						<div class="right-write">
							Sign Up our Newsletter to get latest updates and office subscribe to receive news in your inbox
						</div>
						<div class="right-email">
							Email Address
						</div>
						<div class="right-now">
							<a href="">Subscribe Now</a>
						</div>
					</div>
				</div>
			</div>
			
			<div class="common-footer-copyright">
				<div class="copyright-inner">
					<img src="img/footer-copyright.png" class="copyright-img"/>
					<div class="copyright-text">@2015 Design Studio <span>Globals</span> /Designed by <span>ThemeFire</span> / only for <span>Envato Market</span></div>
				</div>
			</div>
		</footer>
	<script src="vendor/jquery.min.js" ></script>
	<script src="js/core.js"></script>
	<script type="text/javascript">
		$(function(){
			var i = 0;
			function banner(){
				$('#slider div:not(:eq(i))').hide();
				++i;
				point();
				if(i == 6){
					i = 0;
				}
				
				$('#slider div').eq(i).fadeIn('slow');	
			}
			setInterval(banner,4000);
			
			$('#next').click(function(){
				 cycle();
			});
			$('#pre').click(function(){
				$('#slider div:not(:eq(i))').hide();
				 if(i<=0){
					i=6;
				}
				$('#slider div').eq(i).fadeIn('slow');
					--i;
					point();
				});
				//控制圆点
				function point(){
		
					$('.num li').removeClass('on');
					$('.num li').eq(i).addClass('on');
				}
			});
	</script>
	</body>
</html>
